<script setup lang='ts'>
import { ElNotification } from 'element-plus'
import { reactive, ref } from "vue"
import router from "@/router/index"
import { login } from "@/api/login/index.ts"

import pinia from "@/store/index"
import useUserStore from "@/store/modules/user.ts"

let useStore = useUserStore(pinia)
let loginForm = reactive({
    username: '',
    password: ''
})
let loading = ref(false)
async function submit() {
    login(loginForm).then(res => {
        console.log(res);
        localStorage.setItem("token", res.data.token)
        useStore.$state.token = res.data.token
        ElNotification({
            title: '登陆成功',
            message: '即将进入主页...',
            type: 'success',
            duration: 1000
        })
        setTimeout(() => {
            router.push('/')
        }, 1000);
    })
    loading.value = true
}
</script>
 
<template>
    <div class="bgOutter">

        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form label-width="60px" :model="loginForm" class="loginForm">
                    <h2 class="title">登录</h2>
                    <el-form-item label="用户名">
                        <el-input v-model="loginForm.username" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="loginForm.password" />
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" style="width: 100%;" type="primary" @click="submit">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

    </div>
</template>
 
<style scoped lang="scss">
.bgOutter {
    width: 100%;
    height: 100vh;
    background: url("@/assets/images/background.jpg") no-repeat;

    .loginForm {
        max-width: 460px;
        background: #fff;
        padding: 40px;
        border-radius: 10px;
        position: relative;
        top: 30vh;
        left: 30vh;

        .title {
            text-align: center;
            margin-bottom: 30px;
        }
    }
}
</style>